import { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { getTasks, createTask, updateTask, removeTask } from '@/request/tasks';
import toast from 'react-hot-toast';

const TaskList = forwardRef((props, ref) => {
   let history = useHistory();
   const [list, setList] = useState([]);

   // 添加
   const addTask = (value: string) => {
      return createTask({
         data: {
            title: value,
         },
         showSuccess: true,
         success: (data) => {
            setList(data.list);
         },
      });
   };

   // 获取
   const handleGetTasks = () => {
      getTasks({
         success: (data) => {
            setList(data.list);
         },
      });
   };

   // 修改状态
   const handleCheck = (id: string, completed: boolean) => {
      updateTask({
         data: {
            id,
            completed: !completed,
         },
         success: (data) => {
            setList(data.list);
         },
      });
   };

   const handleRemove = (id: string) => {
      removeTask({
         data: {
            id,
         },
         success: (data) => {
            setList(data.list);
         },
      });
   };
   const handleEdit = (id: string) => {
      history.push(`/detail${id}`);
   };

   useImperativeHandle(
      ref,
      () => {
         return {
            addTask,
         };
      },
      []
   );

   useEffect(() => {
      handleGetTasks();
   }, []);

   return (
      <section className="container flex flex-col mt-24 space-y-4 max-h-72 overflow-auto py-4 scrollbar pr-1">
         {list.map((item) => (
            <div className="box flex w-full py-2 shadow-md pr-4" key={item._id}>
               <div
                  className="flex grow items-center space-x-2"
                  onClick={handleCheck.bind(null, item._id, item.completed)}
               >
                  <input
                     type="checkbox"
                     id={item.id}
                     className="checkbox"
                     checked={item.completed}
                     readOnly
                  />
                  <label
                     className={`grow cursor-pointer select-none ${
                        item.completed ? 'line-through text-gray-400' : ''
                     }`}
                     htmlFor={item.id}
                  >
                     {item.title}
                  </label>
               </div>

               <div className="flex items-center space-x-2">
                  <span
                     className="icon select-none"
                     onClick={handleEdit.bind(null, item._id)}
                  >
                     i
                  </span>
                  <span
                     className="icon select-none"
                     onClick={handleRemove.bind(null, item._id)}
                  >
                     x
                  </span>
               </div>
            </div>
         ))}
      </section>
   );
});

export default TaskList;
